<!--
 * @Date: 2025-07-02 15:04:09
 * @LastEditors: Csir 2215995096@qq.com
 * @LastEditTime: 2025-08-26 20:35:20
 * @FilePath: \yujin-ui-admin\src\views\Home\Index.vue
-->
<template>
  <ContentWrap class="content-wrapper">
    <loginOut :pageName="t('router.home')" />
    <!-- 页面标题 -->
    <!--    <div class="page-title">光缆生产管理系统</div>-->

    <!-- 功能按钮区域 -->
    <div class="button-container">
      <div class="menu-t">
        <!-- <img src="@/assets/imgs/menu-t.png" alt="" /> -->
        {{ t('opticore.index.title') }}
      </div>
      <div class="function-btn" @click="material">
        <div class="title-m">
          <div class="t">{{ t('opticore.index.materialInboundOutbound') }}</div>
          <img src="@/assets/imgs/arrow.png" alt="" />
        </div>
        <div class="sub-title">
          <div class="t">{{
            t('opticore.index.recordAllMaterialInboundAndOutboundInformation')
          }}</div>
          <img src="@/assets/imgs/menubgc1.png" alt="" />
        </div>
      </div>
      <div class="function-btn" @click="report">
        <div class="title-m">
          <div class="t">{{ t('opticore.index.productionReporting') }}</div>
          <img src="@/assets/imgs/arrow.png" alt="" />
        </div>
        <div class="sub-title">
          <div class="t">{{
            t('opticore.index.rackProductionProgressInRealTimeAndOptimizeProductionScheduling')
          }}</div>
          <img src="@/assets/imgs/menubgc2.png" alt="" />
        </div>
      </div>

      <div class="function-btn" @click="inspection">
        <div class="title-m">
          <div class="t">{{ t('opticore.index.qualityInspection') }}</div>
          <img src="@/assets/imgs/arrow.png" alt="" />
        </div>
        <div class="sub-title">
          <div class="t">{{ t('opticore.index.preventAndReduceNonConformingProducts') }}</div>
          <img src="@/assets/imgs/menubgc3.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 装饰元素 -->
    <!--    <div class="decor-element top-left"></div>-->
    <!--    <div class="decor-element bottom-right"></div>-->
  </ContentWrap>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import loginOut from '@/components/loginOut/index.vue'
const { t } = useI18n()

const router = useRouter()

/** 物料出入库 */
const material = async () => {
  // 物料出入库逻辑
  router.push('/customer/material')
}

/* 生产报工 */
const report = async () => {
  // 生产报工逻辑
  router.push('/customer/workreport')
}

/* 质量检测 */
const inspection = async () => {
  // 质量检测逻辑
  router.push('/customer/execute')
}
</script>

<style lang="less" scoped>
.content-wrapper {
  position: relative;
  // min-height: ;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  margin: 77px 16px 16px 16px;
  background-color: #fff;
  // overflow: hidden;
}

/* 页面标题样式 */
.page-title {
  position: absolute; /* 绝对定位到左上角 */
  top: 30px;
  left: 30px;
  font-size: 36px;
  font-weight: bold;
  color: #1f2329;
  letter-spacing: 1px;
  z-index: 20; /* 确保在装饰元素上方 */
}

/* 按钮容器 - 实现居中 */
.button-container {
  display: flex;
  gap: 40px; /* 按钮之间的间距 */
  z-index: 10;
}
.menu-t {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #058eff;
  img {
    width: 712px;
    height: 83px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 24px;
    color: #058eff;
    letter-spacing: 6px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

/* 功能按钮样式 */
.function-btn {
  font-size: 28px;
  padding: 47px 23px 24px 37px;
  width: 492px;
  height: 335px;
  background: #ffffff;
  box-shadow:
    -8px -8px 10px 0px rgba(50, 96, 195, 0.05),
    8px 8px 10px 0px rgba(50, 96, 195, 0.05);
  border-radius: 15px 15px 15px 15px;
  cursor: pointer;
  transition: all 0.3s ease; /* 添加过渡动画效果 */

  .title-m {
    width: 100%;
    display: flex;
    align-items: center;

    justify-content: space-between !important;
    .t {
      height: 67px;
      line-height: 67px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 28px;
      color: #17233d;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    img {
      width: 38px;
      height: 38px;
      border-radius: 0px 0px 0px 0px;
    }
  }
  .sub-title {
    display: flex;
    margin-top: 29px;
    .t {
      width: 215px;
      height: 68px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #515a6e;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    img {
      width: 205px;
      height: 166px;
      border-radius: 0px 0px 0px 0px;
    }
  }
}

.function-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 装饰元素 */
.decor-element {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0.1;
  background: linear-gradient(135deg, #409eff, #67c23a);
}

.top-left {
  top: -150px;
  left: -150px;
}

.bottom-right {
  bottom: -150px;
  right: -150px;
  background: linear-gradient(135deg, #e6a23c, #f56c6c);
}

/* 响应式调整 */
@media (max-width: 992px) {
  .button-container {
    flex-direction: column;
    gap: 30px;
  }

  .function-btn {
    width: 350px;
    height: 150px;
    font-size: 24px;
    .sub-title {
      // display: none;
      font-size: 12px;
      margin: 0px 0 0 0;
    }
    .title-m {
      img {
        display: none !important;
      }
    }
  }

  .page-title {
    font-size: 28px;
    margin-bottom: 40px;
  }
}
// 新增移动端优先的媒体查询
@media (max-width: 576px) {
  .content-wrapper {
    // margin: 40px 8px 8px 8px;
    padding: 8px;
  }

  .menu-t {
    font-size: 18px;
    top: 15px;
  }

  .function-btn {
    padding: 15px;
    margin-bottom: 10px;

    .title-m .t {
      font-size: 18px;
    }

    .sub-title .t {
      font-size: 14px;
    }

    img {
      display: none;
    }
  }
}

// 横屏适配
@media (max-width: 992px) and (orientation: landscape) {
  .content-wrapper {
    height: auto;
    min-height: 100vh;
  }
}

// 高分辨率设备适配
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .function-btn {
    border: 0.5px solid #eee;
  }
}

// 触控设备交互优化
@media (pointer: coarse) {
  .function-btn {
    min-height: 80px;
    padding: 20px;

    &:active {
      background-color: #f5f7fa;
    }
  }
}
</style>
